<template>
  <div class="tabs-box">
    <div class="home" @click="goHome">
      <img src="/images/home.png" class="home-pic" @click="homeCli" />
    </div>

    <div class="refresh">
      <el-button class="btn" size="mini" @click="goRefresh" circle>
        <el-icon :size="20" color="#333">
          <refresh-right />
        </el-icon>
      </el-button>
    </div>

    <div class="back">
      <el-button size="mini" @click="goBack" round>
        <el-icon :size="20" color="#333">
          <arrow-left />
        </el-icon>返回
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

//首页
const goHome = () => {
  router.push({ path: '/home/index' })
}

//返回
function goBack() {
  router.back(-1)
}

//刷新
function goRefresh() {
  location.reload()
}
</script>
<style lang="scss">
.tabs-box {
  position: absolute;
  top: 60px;
  left: 150px;
  right: 20px;
  background: #fff;
  height: 44px;
  overflow: hidden;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  .home {
    border-left: 1px solid #ebeef5;
    float: left;
    line-height: 25px;
    height: 25px;
    padding: 10px 18px;
    cursor: pointer;

    .home-pic {
      width: 16px;
      height: 16px;
      padding: 7px;
      border: 1px solid #f0f0f0;
      border-radius: 100px;
      margin-top: -4px;
      background: #e8e8e8;

      img {
        width: 16px;
        height: 16px;
      }
    }
  }

  .back {
    float: left;
    margin-top: 6px;
    margin-right: 15px;

    .el-button {
      padding: 8px 14px 8px 10px;
      background: #e8e8e8;
      color: #333 !important;
      font-size: 14px;
    }
  }

  .refresh {
    float: left;
    margin-top: 6px;
    margin-right: 15px;

    .el-button {
      width: 32px;
      height: 32px;
      background: #e8e8e8;
      color: #333;
      font-size: 14px;
    }
  }
}
</style>
